<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #timer {
                position: fixed;
                right: 10px;
                top: 10px;
                padding: 20px;
                border: 2px #999999 solid;
                border-radius: 4px;
                background-color: #cccccc;
            }
            #timer span {
                display: block;
                text-align: center;
                margin: 0 auto 5px auto;
            }
            table {
                margin: 10px auto;
                border: 1px solid #999999;
                border-collapse: collapse;
                width: 800px;
            }
            table td.key {
                text-align: right;
            }
            table td {
                width: 50%;
                padding: 6px 6px;
                vertical-align: middle;
                border: 1px solid #999999;
                border-collapse: collapse;
            }
        </style>
        <script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            var tests = [
                [
                    {
                        'key' : 'Singleton',
                        'value' : 'Одиночка'
                    },
                    {
                        'key' : 'key text',
                        'value' : 'value text'
                    }
                ]
            ],
            timer;
            setInterval(function () {
                $('#timer span').text(Math.round((Number(new Date()) - timer) / 1000));
            }, 1000);
            function showTest(index, revert) {
                var table, td;
                if (tests[index] instanceof Array) {
                    timer = Number(new Date());
                    table = $('<table class="test" />');
                    tests[index].forEach(function (element) {
                        var tr = $('<tr />', {'id' : 'test-' + index});
                        if (revert) {
                            $('<td/>', {
                                'class' : 'key',
                                'text' : element['value']
                            }).appendTo(tr);
                        } else {
                            $('<td/>', {
                                'class' : 'key',
                                'text' : element['key']
                            }).appendTo(tr);
                        }
                        $('<td/>').append($('<input/>', {
                            'type'  : 'text',
                            'value' : ''
                        })).appendTo(tr);
                        table.append(tr);
                    });
                    table.appendTo('body');
                    (function () {
                        var div    = $('<div/>',   {'id' : 'timer'});
                        var text   = $('<span/>',  {'text' : '0'});
                        var button = $('<input/>', {'type' : 'button', 'value' : 'Пропустить'});
                        div.append(text);
                        div.append(button);
                        $('body').append(div);
                    }());
                }
            }
            $(function () {
                showTest(0, false);
            });
        </script>
    </head>
    <body>
    </body>
</html>